<template>
  <h1>双向绑定指令</h1>
<!--双向绑定：将info变量的值与页面上的元素进行绑定，效果：
    1）info变量的数据发生变化，页面HTML的显示会随之变化(Data Binding数据绑定)
    2）页面上元素的值会发生变化，info变量的值也会随之变化(DOM Listener事件监听)-->
  <input type="text" v-model="info">
  {{info}}
  <br>
  <h3>用户登录</h3>
  用户名：<input type="text" placeholder="请输入用户名" v-model="user.username">
  密码：<input type="password" placeholder="请输入密码" v-model="user.password"><br>
  男：<input type="radio" name="gender" value="男" v-model="user.gender">
  女：<input type="radio" name="gender" value="女" v-model="user.gender">
  <button @click = "login">登录</button>
</template>

<script setup>
  import {ref} from "vue";
  const info = ref('双向绑定');

  const user = ref({
    username:'',
    password:'',
    gender:''
  });
  const login = () => {
    console.log(user.value);//打印完整的对象
    console.log(user.value.username);//打印对象的指定属性值
    console.log(user.value.password);
    console.log(user.value.gender);
  }
</script>


<style scoped>

</style>